<template>
  <div style="width: 100%; background-color: #061438">
    <!-- <div class="echarts-box echarts-box-h">
      <span>数据服务中心</span>
    </div> -->
    <div style="display: flex">
      <div style="width: 35%; height: 530px"
           class="echarts-box"
           ref="chart1"></div>

      <div style="width: 65%; height: 530px; margin-left: 20px"
           class="echarts-box"
           ref="chart2"></div>
    </div>
    <div style="width: 100%; height: 380px"
         class="echarts-box"
         ref="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import api from '@/api/apis/data.js'
export default {
  data() {
    return {
      musicTotal: 0,
      initEchartData: [],
      initEchart2Data: [],
      max: [],
      values: [],
      data: [],
    }
  },

  mounted() {
    if (this.$store.state.user != null) {
      this.musicData()
      this.initEchart()
      this.initEchart2()
    }

  },

  methods: {
    initEchart() {
      let myChart = this.$echarts.init(this.$refs.chart, null, {
        renderer: 'svg',
      })
      // style的参考文档 https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable

      // 柱体左面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c0 = [shape.x, shape.y] // 右上点
          const c1 = [shape.x - 12, shape.y - 5] // 左上点
          const c2 = [xAxisPoint[0] - 12, xAxisPoint[1] - 6] // 左下点
          const c3 = [xAxisPoint[0], xAxisPoint[1]] // 右下点
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath()
        },
      })
      // 柱体右面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint
          const c1 = [shape.x, shape.y] // 左上点
          const c2 = [xAxisPoint[0], xAxisPoint[1]] // 左下点
          const c3 = [xAxisPoint[0] + 20, xAxisPoint[1] - 6] // 右下点
          const c4 = [shape.x + 20, shape.y - 3.5] // 右上点
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath()
        },
      })
      // 柱体顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y] // 下点
          const c2 = [shape.x + 20, shape.y - 4] // 右点
          const c3 = [shape.x + 9, shape.y - 8] // 上点
          const c4 = [shape.x - 12, shape.y - 5] // 左点
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath()
        },
      })
      echarts.graphic.registerShape('CubeLeft', CubeLeft)
      echarts.graphic.registerShape('CubeRight', CubeRight)
      echarts.graphic.registerShape('CubeTop', CubeTop)

      const MAX = this.max
      const VALUE = this.values
      const GenerateBarGradient = function () {
        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#01E2EF',
          },
          {
            offset: 1,
            color: '#134E9F',
          },
        ])
      }
      const ChartBgColor = 'rgba(1, 13, 58, 1)'
      const OptityBarBgColor = 'rgba(7, 29, 97, .6)'

      let option = {
        // 图表背景大图
        backgroundColor: ChartBgColor,
        // 标题
        title: {
          text: '每日同步情况',
          top: 32,
          left: 18,
          textStyle: {
            color: '#00F6FF',
            fontSize: 24,
          },
        },
        // 控制图片位置偏移
        grid: {
          left: 20,
          right: 40,
          bottom: '19%',
          top: 107,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: this.data,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white',
            },
          },
          offset: 20,
          axisTick: {
            show: false,
            length: 9,
            alignWithLabel: true,
            lineStyle: {
              color: '#7DFFFD',
            },
          },
          axisLabel: {
            fontSize: 10,
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'white',
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 16,
          },
          boundaryGap: ['20%', '20%'],
        },
        series: [
          // 透明的柱体，和背景色是同色系的
          {
            type: 'custom',
            data: MAX,
            renderItem: function (params, api) {
              const location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: OptityBarBgColor,
                    },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: 'rgba(10,35,108,.7)',
                    },
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: 'rgba(11,42,106,.8)',
                    },
                  },
                ],
              }
            },
          },
          // 显示柱体文本
          {
            type: 'bar',
            data: MAX,
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: (e) => {
                  switch (e.name) {
                    case '10kV线路':
                      return VALUE[0]
                    case '公用配变':
                      return VALUE[1]
                    case '35kV主变':
                      return VALUE[2]
                    case '水':
                  }
                },
                fontSize: 16,
                color: '#fff',
                offset: [4, -25],
              },
            },
            itemStyle: {
              color: 'transparent',
            },
          },
          // 实际显示的柱体
          {
            type: 'custom',
            data: VALUE,
            tooltip: {},
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: GenerateBarGradient(),
                    },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: GenerateBarGradient(),
                    },
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: GenerateBarGradient(),
                    },
                  },
                ],
              }
            },
          },
        ],
      }

      myChart.setOption(option)
    },
    initEchart1() {
      // 复制代码
      const chartData = this.initEchartData
      const sum = chartData.reduce((per, cur) => per + cur.value, 0)
      const gap = (1 * sum) / 100
      const pieData1 = []
      const gapData = {
        name: '',
        value: gap,
        itemStyle: {
          color: 'transparent',
        },
      }

      //图标位置显示
      // let total = 0;
      // chartData.forEach((item) => {
      //   total += item.value;
      // });

      for (let i = 0; i < chartData.length; i++) {
        // 第一圈数据
        pieData1.push({
          ...chartData[i],
        })
        pieData1.push(gapData)
      }
      let option = {
        backgroundColor: 'rgba(1, 13, 58, 1)', //#102146
        title: {
          show: true,
          text: this.musicTotal,
          subtext: '歌曲总数',
          x: '39.5%',
          y: '43%',
          itemGap: 6,
          textStyle: {
            color: '#fff',
            fontSize: 50,
            fontWeight: '400',
            lineHeight: 60,
          },
          subtextStyle: {
            color: '#fff',
            fontSize: 26,
            fontWeight: '400',
            lineHeight: 36,
          },
          textAlign: 'center',
        },

        legend: {
          orient: 'horizontal', //vertical
          icon: 'diamond',
          textStyle: {
            color: '#f2f2f2',
            fontSize: '12px',
          },
          top: '10%',
          right: '-10%',
          itemGap: 14,
          itemHeight: 14,
          itemWidth: 14,
          data: chartData.name,
        },
        series: [
          {
            name: '',
            type: 'pie',
            roundCap: true,
            radius: ['40%', '56%'],
            center: ['40%', '50%'],
            data: pieData1,
            labelLine: {
              length: 8,
              length2: 16,
              lineStyle: {
                width: 1,
              },
            },
            label: {
              show: true,
              fontFamily: 'ysbth',
              position: 'outside',
              padding: [0, -4, 0, -4],
              formatter(params) {
                if (params.name === '') {
                  return ''
                }
                return `${params.percent.toFixed(0)}%`
              },
              color: '#fff',
              fontSize: '14px',
              lineHeight: 10,
            },
          },
          {
            type: 'pie',
            radius: ['32%', '34%'],
            center: ['40%', '50%'],
            animation: false,
            hoverAnimation: false,
            data: [
              {
                value: 100,
              },
            ],
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: '#3BC5EF',
              },
            },
          },
          {
            name: '',
            type: 'pie',
            startAngle: 90,
            radius: '32%',
            animation: false,
            hoverAnimation: false,
            center: ['40%', '50%'],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                  {
                    offset: 1,
                    color: 'rgba(50,171,241, 0)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(50,171,241, .4)',
                  },
                  {
                    offset: 0,
                    color: 'rgba(55,70,130, 0)',
                  },
                ]),
                shadowBlur: 60,
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
        ],
      }

      let myChart = this.$echarts.init(this.$refs.chart1, null, {
        renderer: 'svg',
      })
      myChart.setOption(option)
    },
    initEchart2() {
      var reslult = this.initEchart2Data
      var data = []
      // 渲染数据，并写入chart
      reslult.map((item) => {
        data.push({
          name: item.name,
          number: item.num,
          value: item.position,
          symbolSize: item.size,
          itemStyle: {
            normal: {
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 0.2,
                  color: 'rgba(27, 54, 72, 0.3)',
                },
                {
                  offset: 1,
                  color: item.color,
                },
              ]),
              borderWidth: 3,
              borderColor: item.color,
            },
          },
        })
      })
      let option = {
        backgroundColor: 'rgba(1, 13, 58, 1)', //#061438
        grid: {
          show: false,
          top: 10,
          bottom: 10,
        },
        xAxis: [
          {
            type: 'value',
            show: false,
            min: 0,
            max: 100,
          },
        ],
        yAxis: [
          {
            min: 0,
            show: false,
            max: 100,
          },
        ],

        series: [
          {
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
                color: '#fff',
                textStyle: {
                  fontSize: '20',
                },
              },
            },
            animationDurationUpdate: 500,
            animationEasingUpdate: 500,
            animationDelay: function (idx) {
              // 越往后的数据延迟越大
              return idx * 100
            },
            data: data,
          },
        ],
      }

      let myChart = this.$echarts.init(this.$refs.chart2, null, {
        renderer: 'svg',
      })
      myChart.setOption(option)
    },
    musicData() {
      api.musicData().then((res) => {
        if (res.data.code == 200) {
          let json = JSON.parse(res.data.data.json)
          this.initEchartData = json.data
          this.musicTotal = json.total
          this.initEchart1()
        }
      })

      api.artistData().then((res) => {
        if (res.data.code == 200) {
          this.initEchart2Data = res.data.data
          this.initEchart2()
        }
      })

      api.syncData().then((res) => {
        if (res.data.code == 200) {
          for (let i = 0; i < res.data.data.length; i++) {
            let obj = res.data.data[i]
            this.max.push(obj.api)
            this.values.push(obj.db)
            this.data.push(obj.updateTime)
          }
          this.initEchart()
        }
      })

      console.log(this.max)
      console.log(this.values)
      console.log(this.data)
    },
  },
}
</script>

<style scoped>
.echarts-box {
  /* border: 0.1px solid #00F6FF;
   */
  margin-bottom: 20px;
}

.echarts-box-h {
  height: 80px;
  background-color: rgba(1, 13, 58, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 20px;
}

.echarts-box span {
  color: white;
  font-size: 40px;
}
</style>